<template>
    <div class="list-item">
        <el-checkbox v-model="cart.checked" @change="checkChange"></el-checkbox>
        <div class="goods-content">
            <img :src="cart.productImg" alt="">
            <div class="title">{{ cart.description || cart.productName }}</div>
            <div class="price">单价：
                <span>￥{{ cart.price.toFixed(2) }}</span>
            </div>
            <div class="count">
                <el-input-number v-model="productQty" @change="handleChange" size="small" :min="1" :max="100"
                    label="描述文字"></el-input-number>
            </div>
            <div class="delect" @click="delectHandler">删除</div>
        </div>
    </div>
</template>
<script>

export default {
    name: 'ListItem',
    components: {

    },
    mixins: [],
    props: ['cart'],
    data() {
        return {
            productQty: this.cart.productQty
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
    },
    methods: {
        handleChange(productQty) {
            let good = {
                id: this.cart.id,
                productId: this.cart.productId,
                productQty: +productQty
            }
            this.$emit('changeCount', good)
        },
        checkChange(checked) {
            let good = {
                checked,
                productId: this.cart.productId
            }

            this.$emit('checkStateChange', good)
        },
        delectHandler() {
            this.$emit('delectGoods', this.cart.id)
        }
    }
};
</script>
<style lang='less' scoped>
.list-item {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eae9e9;

    .goods-content {
        width: 100%;
        display: flex;
        justify-content: space-between;

        img {
            width: 100px;
            height: 100px;
            border-radius: 5px;
            margin: 0 15px;
        }

        .title {
            width: 200px;
            font-size: 14px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            background-color: white;
        }

        .price {
            width: 200px;
            font-size: 13px;

            span {
                color: red;
                font-size: 14px;
                font-weight: 900;
            }
        }

        .count {
            width: 200px;
        }

        .delect {
            flex: 1;
            color: red;
            cursor: pointer;
        }
    }
}
</style>